<template>
    <div class="main-container">
        <div class="user-search">
            <div class="user-search-item1">
                <span>信息检索</span>
            </div>
            <div class="user-search-item2">
                昵称：<el-input ></el-input>
                手机号：<el-input></el-input>
                <el-button type="primary">查询</el-button>
                 <el-button type="success" @click="show = !show">弹窗测试</el-button>
                 {{ show }}
            </div>
        </div>
        <el-table :data="tableData" stripe border class="user-data-table">
            <el-table-column prop="userId" label="用户id" width="180"></el-table-column>
            <el-table-column prop="telephone" label="手机号"  width="190"></el-table-column>
            <el-table-column prop="avatar" label="头像"  width="180"></el-table-column>
            <el-table-column prop="nickName" label="昵称"  width="180"></el-table-column>
            <el-table-column prop="sex" label="性别"  width="180"></el-table-column>
            <el-table-column prop="age" label="手机号"  width="180"></el-table-column>
            <el-table-column prop="area" label="区域"  width="280"></el-table-column>
            <el-table-column prop="matchDevice" label="是否配对设备"  width="80"></el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next"  :total="1000" class="user-paginatin">
        </el-pagination>
    </div>
   
</template>
<script>
import UserDailog from './UserDialog'
export default {
  data() {
      return {
          show: true,
          tableData:[{
              userId: 'test1',
              telephone: '13720541455',
              avatar: '',
              nickName: 'test',
              sex: 0,
              age:32,
              area: '陕西省西安市科技二路零壹广场',
              matchDevice: 0,
          },
          {
              userId: 'test1',
              telephone: '13720541455',
              avatar: '',
              nickName: 'test',
              sex: 0,
              age:32,
              area: '陕西省西安市科技二路零壹广场',
              matchDevice: 0,
          }]
      }
  },
  components:{
      UserDailog
  },
  methods:{
      showDialog(){
          this.show =  !this.show;
      }
  }
}
</script>
<style scoped>
    .user-search{
        border-radius:5px;
        height: 150px;
        background-color: white;
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }

    .user-data-table{
        border-radius:5px;
     border: 1px solid #ddd;
    }

    .user-paginatin{
        margin-top:15px;
        float: right;
    }

    .user-search-item1{
        height: 60px;
        border-bottom: 1px solid #ddd;
        background-color: #dddddd;
    }
    .user-search-item1 span{
        margin-left: 20px;
        text-align: left;
        line-height: 60px;
    }
    .user-search-item2{
        padding-left:20px;
    }
    .user-search-item2 .el-input{
        width: 180px;
        padding: 24px;
    }
</style>
